<template>
  <div class="media-component">
    <!-- 视频组件 -->
    <div v-if="type === 'video'" class="video-component">
      <video
        :src="props.src"
        :autoplay="props.autoplay"
        :loop="props.loop"
        :muted="props.muted"
        :controls="props.controls"
        :poster="props.poster"
        class="video-player"
        @error="handleVideoError"
      >
        您的浏览器不支持视频播放
      </video>
    </div>

    <!-- 轮播图组件 -->
    <div v-else-if="type === 'carousel'" class="carousel-component">
      <el-carousel
        :interval="props.interval"
        :arrow="props.arrow"
        :indicator="props.indicator"
        :autoplay="props.autoplay"
        :type="props.type"
        height="100%"
        class="carousel"
      >
        <el-carousel-item v-for="(image, index) in props.images" :key="index">
          <div class="carousel-item">
            <img :src="image.url || image" :alt="image.alt || `图片${index + 1}`" />
            <div v-if="image.title" class="carousel-title">{{ image.title }}</div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 天气组件 -->
    <div v-else-if="type === 'weather'" class="weather-component">
      <div class="weather-info">
        <div class="weather-city">{{ props.city }}</div>
        <div class="weather-main">
          <div class="weather-icon">
            <el-icon :size="48">
              <component :is="weatherIcon" />
            </el-icon>
          </div>
          <div class="weather-temp">{{ weatherData.temp }}°C</div>
        </div>
        <div class="weather-desc">{{ weatherData.desc }}</div>
        <div class="weather-details">
          <div class="detail-item">
            <span class="label">湿度:</span>
            <span class="value">{{ weatherData.humidity }}%</span>
          </div>
          <div class="detail-item">
            <span class="label">风速:</span>
            <span class="value">{{ weatherData.windSpeed }}km/h</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Sunny, Cloudy, Umbrella, ColdDrink } from '@element-plus/icons-vue'

const props = defineProps({
  type: {
    type: String,
    required: true
  },
  props: {
    type: Object,
    default: () => ({})
  }
})

// 天气数据
const weatherData = ref({
  temp: 25,
  desc: '晴天',
  humidity: 65,
  windSpeed: 12
})

// 根据天气描述获取图标
const weatherIcon = computed(() => {
  const desc = weatherData.value.desc
  if (desc.includes('晴')) return 'Sunny'
  if (desc.includes('云') || desc.includes('阴')) return 'Cloudy'
  if (desc.includes('雨')) return 'Umbrella'
  if (desc.includes('雪')) return 'ColdDrink'
  return 'Sunny'
})

// 处理视频错误
const handleVideoError = (error) => {
  console.error('视频播放错误:', error)
  ElMessage.error('视频加载失败')
}

// 模拟获取天气数据
const fetchWeatherData = async () => {
  try {
    // 这里应该调用真实的天气API
    // 目前使用模拟数据
    const mockData = {
      temp: Math.floor(Math.random() * 30) + 10,
      desc: ['晴天', '多云', '小雨', '阴天'][Math.floor(Math.random() * 4)],
      humidity: Math.floor(Math.random() * 40) + 40,
      windSpeed: Math.floor(Math.random() * 20) + 5
    }
    weatherData.value = mockData
  } catch (error) {
    console.error('获取天气数据失败:', error)
  }
}

onMounted(() => {
  if (props.type === 'weather') {
    fetchWeatherData()
    // 每30分钟更新一次天气数据
    setInterval(fetchWeatherData, 30 * 60 * 1000)
  }
})
</script>

<style scoped>
.media-component {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 视频组件样式 */
.video-component {
  width: 100%;
  height: 100%;
}

.video-player {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

/* 轮播图组件样式 */
.carousel-component {
  width: 100%;
  height: 100%;
}

.carousel {
  width: 100%;
  height: 100%;
}

.carousel-item {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-title {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* 天气组件样式 */
.weather-component {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.weather-info {
  text-align: center;
  color: #fff;
}

.weather-city {
  font-size: 18px;
  margin-bottom: 16px;
  opacity: 0.8;
}

.weather-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
}

.weather-icon {
  color: #ffd700;
}

.weather-temp {
  font-size: 48px;
  font-weight: bold;
}

.weather-desc {
  font-size: 16px;
  margin-bottom: 16px;
  opacity: 0.9;
}

.weather-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

.label {
  opacity: 0.7;
  font-size: 14px;
}

.value {
  font-weight: bold;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .weather-temp {
    font-size: 36px;
  }
  
  .weather-icon {
    font-size: 36px;
  }
  
  .carousel-title {
    font-size: 16px;
    bottom: 15px;
    left: 15px;
  }
}
</style> 